<template>
  <div>
    <van-nav-bar title="登陆" />
    <van-form>
      <van-field
        v-model="mobile"
        required
        label="手机号"
        placeholder="请输入手机号"
        :error-message="mobile_errmsg"
        @input="validate()"
      />
      <van-field
        v-model="code"
        required
        label="验证码"
        placeholder="请输入验证码"
        :error-message="code_errmsg"
        @input="validate()"
      />
      <div style="margin: 16px">
        <van-button
          block
          type="info"
          @click="login"
          style="border-radius: 5px"
          loading-type="spinner"
        >
          登陆
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { reqLogin } from '@/api/user'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  data () {
    return {
      mobile: '13388888888',
      code: '246810',
      mobile_errmsg: '',
      code_errmsg: ''
    }
  },
  computed: {

  },
  methods: {
    ...mapMutations('user', ['setTokenInfo']),
    validate () {
      if (this.mobile === '') {
        this.mobile_errmsg = '亲, 请输入手机号呀'
        return false
      }
      if (!/^1\d{10}$/.test(this.mobile)) {
        this.mobile_errmsg = '亲, 请输入正确的 11 位手机号呀'
        return false
      }
      this.mobile_errmsg = ''

      if (this.code === '') {
        this.code_errmsg = '亲，请输入验证码呀'
        return false
      }
      this.code_errmsg = ''
      return true
    },
    // 登陆按钮
    async login () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true, // 禁止背景点击
        loadingType: 'spinner',
        overlay: true, // 添加灰色遮罩
        duration: 0 // 展示时长(ms)，值为 0 时，toast 不会消失默认2s
      })
      if (!this.validate()) return
      try {
        const { data } = await reqLogin(this.mobile, this.code)
        // 将token存到vuex中
        this.setTokenInfo(data.data)
        // this.$store.commit('user/setTokenInfo', data.data)
        this.$toast.success('登陆成功') // 关闭加载 同一时间只存在一个$toast
        // 登录跳转之前 判断路由信息对象中是否有backto字段, 如果有 说明是被拦截的， 需要让用户原路返回
        if (this.$route.query.backto) {
          // 如果是自己访问的登录页面， 让用户去首页 登陆后可以直接回退到上一级
          this.$router.back()
          // 登陆后可以直接回退存在bug需要配合router权限设置
          // this.$router.push(this.$route.query.backto)
        } else {
          this.$router.push('/')
        }
      } catch (error) {
        this.$toast.fail('登陆失败')
      }
    }
  }
}
</script>

<style lang='scss'>
</style>
